<template>
	<view class="content">
		<view class='withdrawcash-top'>
			<text class='withdrawcash-title-right'>卡号:{{ vCartInfo.data.vcard_no }}</text>
			<view class="withdCardBottom">
				<text class='withdrawcash-balance-title'>余额</text>
				<text class='withdrawcash-balance'>¥{{ cardBalance }}</text>
			</view>
			<text class='withdrawcash-point'>积分：{{ pointsBalance }}</text>
		</view>
		<view class='cell-group margin-cell-group right-img'>
			<!-- <view class='cell-item'>
				<view class='cell-item-hd' @click="navigateToHandle('./recharge')">
					<image class='cell-hd-icon' src='/static/image/topup.png'></image>
					<view class='cell-hd-title'>账户充值</view>
				</view>
				<view class='cell-item-ft'>
					<image class='cell-ft-next icon' src='/static/image/right.png'></image>
				</view>
			</view> -->

			<view v-if="vCartInfo && vCartInfo.data.vcard_no && vCartInfo.data.pwd">
				<view class='cell-item'>
					<view class='cell-item-hd' @click="navigateToHandle('./details')">
						<image class='cell-hd-icon' src='/static/image/detail.png'></image>
						<view class='cell-hd-title'>余额明细</view>
					</view>
					<view class='cell-item-ft'>
						<image class='cell-ft-next icon' src='/static/image/right.png'></image>
					</view>
				</view>

				<view class='cell-item'>
					<view class='cell-item-hd' @click="navigateToHandle('./vcard?vcardNo='+vCartInfo.data.vcard_no)">
						<image class='cell-hd-icon' src='/static/image/card.png'></image>
						<view class='cell-hd-title'>我的实体卡</view>
					</view>
					<view class='cell-item-ft'>
						<image class='cell-ft-next icon' src='/static/image/right.png'></image>
					</view>
				</view>
			</view>
			<view class="button-bottom" v-if="!vCartInfo || !vCartInfo.data.vcard_no || !vCartInfo.data.pwd">
				<button class="btn btn-square btn-o" @click="navigateToHandle('./vcard')" hover-class="btn-hover2">绑定实体卡</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				vCartInfo: null,
				vcard_no: '',
				cardBalance: '0',
				pointsBalance: '0',
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				this.$api.userInfo({}, res => {
					if (res.status) {
						this.userInfo = res.data
						if (res.vCartInfo && res.vCartInfo.data) {
							this.vCartInfo = res.vCartInfo
							if(res.vCartInfo && res.vCartInfo.data && res.vCartInfo.data.vcard_no && res.vCartInfo.data.pwd){
								this.$api.sandCardQuerybalance({
									payType: '1',
									cardNo: res.vCartInfo.data.vcard_no,
									cardPwd: res.vCartInfo.data.pwd
								},res.vCartInfo.data, cardRes => {
									if (cardRes) {
										let {
											cardBalance = '',
												pointsBalance = ''
										} = cardRes
										if (cardBalance && cardBalance.indexOf('+') !== -1) {
											this.cardBalance = parseFloat(cardBalance.substring(1, cardBalance.length) / 100).toFixed(2);
										}
										if (pointsBalance && pointsBalance.indexOf('+') !== -1) {
											this.pointsBalance = parseFloat(pointsBalance.substring(1, pointsBalance.length) / 100).toFixed(2);
										}
									}
								})
							}
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			// 页面跳转
			navigateToHandle(pageUrl) {
				this.$common.navigateTo(pageUrl)
			}
		}
	}
</script>

<style>
	.withdrawcash-top {
		padding: 40upx 26upx;
		background-color: #FF7159;
		color: #fff;
		height: 350upx;
		position: relative;
	}
	
	.withdCardBottom{
		display: block;
		text-align: center;
		margin-top: 20upx;
	}
	.withdrawcash-balance-title{
		display: block;
		font-size: 35upx;
	}
	.withdrawcash-balance{
		display: block;
		font-size: 70upx;
	}

	.withdrawcash-title {
		font-size: 28upx;
	}

	.withdrawcash-title-right {
		font-size: 28upx;
		display: block;
	}

	.withdrawcash-point {
		position: absolute;
		font-size: 30upx;
		bottom: 30upx;
		right: 26upx;
	}

	.margin-cell-group {
		margin: 20upx 0;
		color: #666666;
	}
</style>
